<template>
  <div class="app-container">
    <!-- 第一步，通过流程定义的列表，选择对应的流程 -->
    <div v-if="!selectProcessInstance">
      <el-table v-loading="loading" :data="list">
        <el-table-column
          label="流程名称"
          align="center"
          prop="name"
          width="200"
        >
          <template slot-scope="scope">
            <el-button type="text" @click="handleBpmnDetail(scope.row)">
              <span>{{ scope.row.name }}</span>
            </el-button>
          </template>
        </el-table-column>
        <el-table-column
          label="流程分类"
          align="center"
          prop="category"
          width="100"
        >
          <template slot-scope="scope">
            <dict-tag
              :type="DICT_TYPE.BPM_MODEL_CATEGORY"
              :value="scope.row.category"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="流程版本"
          align="center"
          prop="processDefinition.version"
          width="80"
        >
          <template slot-scope="scope">
            <el-tag size="medium" v-if="scope.row"
              >v{{ scope.row.version }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column
          label="流程描述"
          align="center"
          prop="description"
          width="300"
          show-overflow-tooltip
        />
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              icon="el-icon-plus"
              @click="handleSelect(scope.row)"
              >选择</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 第二步，填写表单，进行流程的提交 -->
    <div v-else>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span class="el-icon-document"
            >申请信息【{{ selectProcessInstance.name }}】</span
          >
          <el-button
            style="float: right"
            type="primary"
            @click="selectProcessInstance = undefined"
            >选择其它流程</el-button
          >
        </div>
        <el-col :span="16" :offset="6">
          <div>
            <parsernew
              :key="new Date().getTime()"
              :form-conf="detailForm"
              :userInfo="userInfo"
              @submit="submitForm"
            />
          </div>
        </el-col>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span class="el-icon-picture-outline">流程图</span>
        </div>
        <my-process-viewer
          key="designer"
          v-model="bpmnXML"
          v-bind="bpmnControlForm"
        />
      </el-card>
    </div>
  </div>
</template>

<script>
import {
  getProcessDefinitionBpmnXML,
  getProcessDefinitionList,
} from "@/api/bpm/definition";
import { DICT_TYPE, getDictDatas } from "@/utils/dict";
import { decodeFields } from "@/utils/formGenerator";
import Parsernew from "@/components/parser/Parsernew";
import { createProcessInstance } from "@/api/bpm/processInstance";
import { getUserProfile } from "@/api/system/user";
import { insertEquip } from "@/api/formdesigner/pollution";
import { createMutiTbProcess } from "@/api/bpm/tbProcess";
import { createTbCheck } from "@/api/bpm/tbCheck";

// 流程实例的发起
export default {
  name: "ProcessInstanceCreate",
  components: {
    Parsernew,
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 表格数据
      list: [],

      // 流程表单详情
      detailForm: {
        fields: [],
      },

      // BPMN 数据
      bpmnXML: null,
      bpmnControlForm: {
        prefix: "flowable",
      },

      // 流程表单
      selectProcessInstance: undefined, // 选择的流程实例

      // 数据字典
      categoryDictDatas: getDictDatas(DICT_TYPE.BPM_MODEL_CATEGORY),

      //用户信息
      userInfo: {},
      //送审信息
      checkVal:[],
      checkSelection:[],
      //流程实例id
      processInstanceID:""
    };
  },
  created() {
    this.getList();
    this.getUser(); //获取用户信息
    // console.log(this.$route.params.val)
    if(this.$route.params.val&&this.$route.params.selection){
      this.checkVal = this.$route.params.val
      this.checkSelection = this.$route.params.selection
      // console.log(this.checkVal,this.checkSelection)
    }
  },
  methods: {
    //获取用户信息
    getUser() {
      getUserProfile().then((response) => {
        // console.log("response", response);
        this.userInfo = response.data;

        // console.log("userInfo", this.userInfo);
      });
    },

    /** 查询流程定义列表 */
    getList() {
      this.loading = true;
      getProcessDefinitionList({
        suspensionState: 1,
      }).then((response) => {
        this.list = response.data;
        this.loading = false;
      });
    },
    /** 处理选择流程的按钮操作 **/
    handleSelect(row) {
      // 设置选择的流程
      this.selectProcessInstance = row;

      // 流程表单
      if (row.formId) {
        // 设置对应的表单
        this.detailForm = {
          ...JSON.parse(row.formConf),
          fields: decodeFields(row.formFields),
        };
        // console.log("this.detailForm",this.detailForm)

        // 加载流程图
        getProcessDefinitionBpmnXML(row.id).then((response) => {
          this.bpmnXML = response.data;
        });
      } else if (row.formCustomCreatePath) {
        this.$router.push({
            path: row.formCustomCreatePath,
            // params:{
            //   val:this.checkVal,
            //   selection:this.checkSelection
            // }
          }
        );
        // 这里暂时无需加载流程图，因为跳出到另外个 Tab；
      }
    },
    /** 提交按钮 */
    submitForm(params) {
      // console.log("1", params);
      if (!params) {
        return;
      }
      // 设置表单禁用
      const conf = params.conf;
      // console.log("2", conf);
      conf.disabled = true; // 表单禁用
      conf.formBtns = false; // 按钮隐藏

      // 提交表单，创建流程
      // const variables = params.values;//原赋值
      let variables = params.values;
      variables.files = JSON.stringify(variables.files)//files数组类型转换为字符串，方便入库
      
      // const variabless = JSON.stringify(variables)
      // console.log("params", params);
      // console.log("variables", variables);
      createTbCheck(variables).then((res) => {//提交数据到图斑审批表
        console.log("res", res)
        this.$modal.msgSuccess("表单信息已提交！");
      });

      createProcessInstance({
        processDefinitionId: this.selectProcessInstance.id,
        variables: variables,
      })
        .then((response) => {
          this.processInstanceID = response.data
          console.log("1111",this.processInstanceID)
          this.$modal.msgSuccess("发起流程成功");
          // 关闭当前窗口
          this.$tab.closeOpenPage();
          // this.$router.go(-1);
          this.$router.push({ path: "/bpm/task/my"})

           //插入流程-图斑关系表
          const mutiData = []
          for(let i in this.checkSelection){
            let j = {processInstanceId:this.processInstanceID,tbId:this.checkSelection[i]}
            mutiData.push(j)
          }
          // console.log("213123123123",mutiData)
          createMutiTbProcess(mutiData)

        })
        .catch(() => {
          conf.disabled = false; // 表单开启
          conf.formBtns = true; // 按钮展示
        });


    },
  },
};
</script>

<style lang="scss">
.my-process-designer {
  height: calc(100vh - 200px);
}

.box-card {
  width: 100%;
  margin-bottom: 20px;
}
</style>
